<%@ page import="java.util.Date" %>
<%@ page import="java.text.SimpleDateFormat" %>
<%@ page import="java.util.concurrent.TimeUnit" %>
<%@ page language="java" 
	contentType="text/html; 
	charset=UTF-8"
	pageEncoding="UTF-8"
	import="connectMysql.TestConnect"
	%>
<!DOCTYPE html>
<html>
<head>
    <title>提交作业</title>
    <meta charset="UTF-8">
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
        }
        .heading {
            text-align: center;
            margin-bottom: 20px;
        }
        .form-group {
            margin-bottom: 20px;
        }
        .form-group label {
            display: block;
            font-weight: bold;
        }
        .form-group input[type="text"],
        .form-group textarea {
            width: 100%;
            padding: 10px;
            font-size: 16px;
        }
        .form-group .countdown {
            font-size: 18px;
            color: red;
            margin-top: 10px;
        }
        .submit-btn {
            display: block;
            width: 100%;
            padding: 10px;
            font-size: 16px;
            text-align: center;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }
        .submit-btn:hover {
            background-color: #45a049;
        }
        .input_data{
        	display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
        }
        .button {
       		margin-right: 10px;
            margin-left: 10px;
            height: 100px;
            width: 200px;
            font-size: 24px;
            font-weight: bold;
            border-radius: 10px;
            background-color: #4CAF50; /* Green */
            color: white;
    	}
    	input[type="button"] {
			text-align: center;
			background-color: #4CAF50;
			color: #fff;
			padding: 10px 20px;
			border-radius: 5px;
			border: none;
			cursor: pointer;
		}
		input[type="button"]:hover{
			background-color: #3e8e41;
		}
		.return_button {
            position: fixed;
            bottom: 20px;
            right: 20px;
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            font-size: 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
    </style>
    <%-- 获取作业名称和学号 --%>
        <% String workid = request.getParameter("work_id"); %>
        <% String userid = request.getParameter("userid"); %>
        <% String class_name=request.getParameter("class_name");%>
        <%-- 获取作业的开始时间和截止时间 --%>
        <% 
			String[] homework_data=connectMysql.TestConnect.get_homework_item(class_name, Integer.parseInt(workid));
	    	String startTime = homework_data[0]; 
	    	String endTime = homework_data[1]; 
	    	String txt=homework_data[2];
	    	
	    	String score="00";
	    	String commit="";
	    	score=connectMysql.TestConnect.get_work_score(class_name, userid, workid);
	    	commit=connectMysql.TestConnect.get_work_commit(class_name, userid, workid);
	    %>
        
        <%-- 获取当前时间 --%>
        <% String currentTime = new java.text.SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(new java.util.Date()); %>
        
        <%-- 判断当前时间是否在规定时间内 --%>
        <% boolean isWithinTime = currentTime.compareTo(startTime) >= 0 && currentTime.compareTo(endTime) <= 0; %>
        
        <%-- 计算剩余时间倒计时 --%>
        <% 
	       
	        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
	        Date endDate = sdf.parse(endTime);
	        long remainingMillis = endDate.getTime() - new Date().getTime();
	
	        long hours = TimeUnit.MILLISECONDS.toHours(remainingMillis);
	        long minutes = TimeUnit.MILLISECONDS.toMinutes(remainingMillis) % 60;
	        long seconds = TimeUnit.MILLISECONDS.toSeconds(remainingMillis) % 60;
        %>
		<script>
	        function countdown() {
	            var hours = <%= hours %>;
	            var minutes = <%= minutes %>;
	            var seconds = <%= seconds %>;
	
	            var countdownElement = document.getElementById("countdown");
	
	            var intervalId = setInterval(function() {
	                if (seconds > 0) {
	                    seconds--;
	                } else {
	                    if (minutes > 0) {
	                        minutes--;
	                        seconds = 59;
	                    } else {
	                        if (hours > 0) {
	                            hours--;
	                            minutes = 59;
	                            seconds = 59;
	                        } else {
	                            clearInterval(intervalId);
	                        }
	                    }
	                }
	
	                countdownElement.innerHTML = hours + "小时 " + minutes + "分钟 " + seconds + "秒";
	            }, 1000);
	        }
	    </script>
</head>
		
<body onload="countdown()">
        <h1 class="heading">提交作业</h1>
     	
     	
        <div style="position: absolute; top: 20%; left: 10%; transform: translate(-50%, -50%);font-size: 7px" >
			    <h1 id="user_id">工号: <%= userid %></h1>
			    <h1 id="work_name"><%=class_name %>第 <%= workid %>次作业</h1>
			    
			    <h1>作业倒计时</h1>
			    <p>剩余时间：<span id="countdown" style="color: red;"></span></p>
			    <h1>分数：<%=score %></h1>
			    <h1>评语:<%=commit %></h1>
		</div>
		<div class="input_data">
			<textarea id="inputText" rows="10" cols="50"></textarea>
	        <br>
		</div>
		<div class="input_data">
			<button type="button" onclick="submitHomework()">确定</button>
		</div>
		<script>
	        function submitHomework() {
	            var inputText = document.getElementById("inputText").value;
	            <%
	            isWithinTime = currentTime.compareTo(startTime) >= 0 && currentTime.compareTo(endTime) <= 0;
	            String class_id=connectMysql.TestConnect.class_name_to_id(class_name);
	            %>
	            window.location="handin_homework_check.jsp?userid=<%= userid %>&intime=<%=isWithinTime%>"+
	            		"&workid=<%=workid%>&classid=<%=class_id%>&handin_time=<%=currentTime%>&describe="+inputText;
	        }
	    </script>

</body>
</html>

















